@if (content) {
  <div class="tab" [ngClass]="{ pills: content.pills }">
    @if (content.id) {
      <a class="anchor" [id]="content.id"></a>
    }
    <app-spacer [size]="content.spacer || 'md'" />
    <div class="{{ content.fullWidth ? '' : 'container' }}">
      @if (content.text) {
        <app-text [attr.data-path]="'text'" [content]="content.text" />
      }
      @switch (content.align) {
        @case ('center') {
          <mat-tab-group
            [attr.data-path]="'elements'"
            [selectedIndex]="selectedIndex"
            mat-align-tabs="center"
            [ngClass]="content.classes"
          >
            @for (item of content.elements; track item; let i = $index) {
              <mat-tab label="{{ item.label }}">
                <div [attr.data-path]="i" class="{{ content.fullWidth ? 'py-5' : 'p-5' }}">
                  @if (content.bg) {
                    <app-bg-img [content]="content.bg" />
                  }
                  @for (item of item.elements; track item; let i = $index) {
                    <app-dynamic-component [attr.data-path]="'elements.' + i" [inputs]="item" />
                  }
                </div>
              </mat-tab>
            }
          </mat-tab-group>
        }
        @case ('end') {
          <mat-tab-group
            [attr.data-path]="'elements'"
            [selectedIndex]="selectedIndex"
            mat-align-tabs="end"
            [ngClass]="content.classes"
          >
            @for (item of content.elements; track item; let i = $index) {
              <mat-tab label="{{ item.label }}">
                <div [attr.data-path]="i" class="{{ content.fullWidth ? 'py-5' : 'p-5' }}">
                  @if (content.bg) {
                    <app-bg-img [content]="content.bg" />
                  }
                  @for (item of item.elements; track item; let i = $index) {
                    <app-dynamic-component [attr.data-path]="'elements.' + i" [inputs]="item" />
                  }
                </div>
              </mat-tab>
            }
          </mat-tab-group>
        }
        @default {
          <mat-tab-group
            [attr.data-path]="'elements'"
            [selectedIndex]="selectedIndex"
            mat-align-tabs="start"
            [ngClass]="content.classes"
          >
            @for (item of content.elements; track item; let i = $index) {
              <mat-tab label="{{ item.label }}">
                <div [attr.data-path]="i" class="{{ content.fullWidth ? 'py-5' : 'p-5' }}">
                  @if (content.bg) {
                    <app-bg-img [content]="content.bg" />
                  }
                  @for (item of item.elements; track item; let i = $index) {
                    <app-dynamic-component [attr.data-path]="'elements.' + i" [inputs]="item" />
                  }
                </div>
              </mat-tab>
            }
          </mat-tab-group>
        }
      }
    </div>
    <app-spacer [size]="content.spacer || 'md'" />
  </div>
}
